<template>
  <div>
    <!-- computed和watch -->
    <!-- computed -->
    <button @click="a += 1">修改a的值</button>
    <button @click="b += 1">修改b的值</button>
    <button @click="c.age += 1">修改age的值</button>
    <div>computed : {{ sum }}</div>
    <div>watch: {{ sum2 }}</div>
    <div>watch: {{ d }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      a: 1,
      b: 2,
      sum2: 0,
      c: {
        age: 10,
      },
      d: 0,
    };
  },
  //   如果是一个数据受到多个数据的影响，一般使用computed
  computed: {
    sum() {
      return this.a + this.b;
    },
  },
  //   如果要使用watch来实现computed类似的效果
  watch: {
    a: {
      handler() {
        this.sum2 = this.a + this.b;
      },
      //   如果是立即监听
      immediate: true,
    },
    b: {
      handler() {
        this.sum2 = this.a + this.b;
      },
      //   如果是立即监听
      immediate: true,
    },
    // c: {
    //   handler() {
    //     this.d = this.c.age * 4;
    //   },
    //   //   深度监听
    //   deep: true,
    // },
    // 其实监听一个对象的属性数据，更加推荐使用 下面的方式
    "c.age"() {
      this.d = this.c.age * 4;
    },
  },
};
</script>
